// 柱状图
// 1.把功能代码都放到这个组件中
// 2.把可变的部分抽象成prop参数
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const BarChart = ({title}) => {
    const charRef = useRef(null)
    useEffect(() => {
    // 纯原生写法: let chartDom = doucument.getElementById('main');
    // 保证Dom可用才进行图标渲染
    // 1.获取到要渲染的Dom节点
    let chartDom = charRef.current;
    // 2.图标初始化生成实例对象
    let myChart = echarts.init(chartDom);
    // 3.准备图标参数
    let option;
    option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: ['Vue','React','Angular']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [10, 40, 70],
          type: 'bar'
        }
      ]
    };
    // 4. 使用图表参数完成更改
    option && myChart.setOption(option);
    })
    return (
        <div>
            <div ref={charRef} style={{width:'500px',height:'400px'}}></div>
        </div>)
}
export default BarChart